<template>
	<view class="content-box">
		<u-notify ref="uNotify"></u-notify>
		<view class="user-header-box content-box-row-start">
			<u--image 
				src="https://cdn.uviewui.com/uview/album/1.jpg"
				shape="square" 
				width="56"
				height="56"
				radius="5px">
			</u--image>
			<view style="margin-left: 8px;">
				<view class="content-box-row-start">
					<u-icon name="account-fill" size="18px"></u-icon>
					<view style="font-size: 18px;">{{ user.username }} </view>
				</view>
				<view class="content-box-row-start" >
					<u-icon name="bookmark-fill" size="18px"></u-icon>
					<view>{{ user.user_type }} </view>
				</view>
				<view class="content-box-row-start">
					<u-icon name="phone-fill" size="18px"></u-icon>
					<view v-if="user.phone ">{{ user.phone }} </view>
					<view v-else>无</view>
					<u-icon style="margin-left: 8px;" name="email-fill" size="18px"></u-icon>
					<view v-if="user.email">{{ user.email }} </view>
					<view v-else>无</view>
				</view>
			</view>
		</view>
		
		<u-line color="#2979ff"></u-line>
		
		<view class="user-menu-box">
			<u-cell-group>
				<u-cell icon="account-fill" title="修改信息" @click="isShowUserInfoEdit=true"></u-cell>
			</u-cell-group>
			<u-popup :show="isShowUserInfoEdit" mode="center" @close="closeUserInfoEdit">
				<view style="padding: 8px; border-radius: 10px;">
					<u--form
						labelPosition="left"
						:model="user"
						ref="uForm">
						<u-form-item borderBottom>
							<u--input
								prefixIcon="phone-fill"
								placeholder="请输入电话"
								v-model="user.phone"
								border="none">
							</u--input>
						</u-form-item>
						<u-form-item borderBottom>
							<u--input
								prefixIcon="email-fill"
								placeholder="请输入邮箱"
								v-model="user.email"
								border="none">
							</u--input>
						</u-form-item>
						<u-form-item borderBottom>
							<u--input
								:password="true"
								prefixIcon="lock-opened-fill"
								placeholder="请输入新密码"
								v-model="user.password"
								border="none">
							</u--input>
						</u-form-item>
					</u--form>
					<u-button style="width: 60%; margin-top: 10px;" type="primary" text="提交" @click="save"></u-button>
				</view>
			</u-popup>
		</view>
		
		<view style="width: 60%; position: absolute; bottom: 80px;">
			<u-button type="primary" text="退出帐号" @click="loginOut"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "UserPage",
		data() {
			return {
				user: {},
				isShowUserInfoEdit: false,
				token: "",
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				uni.getStorage({
					key: "token",
					success: (token) => {
						this.token = token.data
						uni.request({
							url: "/api/user/info",
							method: "GET",
							header: {
								Authorization: token.data,
							},
							success: (res) => {
								uni.setStorage({
									key: "user",
									data: res.data.data,
								})
								this.user = res.data.data
							},
							fail() {
								uni.clearStorage()
								uni.redirectTo({
									url: "/pages/index/index"
								})
							}
						})
					},
					fail: (res) => {
						uni.redirectTo({
							url: "/pages/index/index"
						})
						uni.clearStorage()
					}
				})
			},
			loginOut() {
				uni.clearStorage()
				uni.navigateTo({
					url: "/pages/index/index"
				})
			},
			closeUserInfoEdit() {
				this.isShowUserInfoEdit = false
			},
			save() {
				uni.request({
					url: "/api/user/update",
					method: "POST",
					header: {
						Authorization: this.token,
					},
					data: this.user,
					success: (res) => {
						this.isShowUserInfoEdit = false
						if(res.data.code === 200) {
							this.$refs.uNotify.show({
								top: 10,
								type: 'success',
								color: '#00f600',
								bgColor: '#2f3233',
								message: res.data.msg,
								duration: 1000 * 3,
								fontSize: 14,
								safeAreaInsetTop: false
							})
						} else {
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								color: '#ff0000',
								bgColor: '#2f3233',
								message: res.data.msg,
								duration: 1000 * 3,
								fontSize: 14,
								safeAreaInsetTop: false
							})
						}
					},
					fail() {
						uni.clearStorage()
						uni.redirectTo({
							url: "/pages/index/index"
						})
					}
				})
			},
		}
	}
</script>

<style>
	.user-header-box {
		width: 100%;
		margin-bottom: 16px;
	}
	
	.user-menu-box {
		width: 100%;
		margin-top: 16px;
	}

</style>
